﻿@model CustomerInvoiceListModel
@using SpotsHub.Gateway.Models.Customer;
@using Nop.Core.Infrastructure;
@using Telerik.Web.Mvc;
@using Telerik.Web.Mvc.UI;
@{
    Layout = "~/Views/Shared/_MyHUB.cshtml";

    //title
    ViewBag.Title = T("Account.MyAccount") + " - " + T("Account.CustomerInvoices");
    var gridPageSize = EngineContext.Current.Resolve<Nop.Core.Domain.Customers.CustomerSettings>().GridPageSize;
    if (gridPageSize <= 0)
    {
        gridPageSize = 10;
    }
}
@section left
{
    @Html.Partial("MyAccountNavigation", Model.NavigationModel, new ViewDataDictionary())
}
<div class="page-invoices">
    <h1 class="page-title">@T("Account.MyAccount") - @T("Account.CustomerInvoices")</h1>

    <div class="my-hub-body section-wrapper">
        @Html.Action("RenderMessages", "Common")
        <div class="invoices-search">
            <table>
                <tr>
                    <td class="invoice-searchbox">
                        @Html.TextBoxFor(model => model.InvoiceNumber, new { placeholder = "Please type in invoice #", autocomplete = "off", @class = "form-control" })
                    </td>
                    <td class="connector">for</td>
                    <td class="invoice-daylist">
                        @Html.DropDownListFor(model => model.InvoiceDayOption, Model.InvoiceDaysOptions, new { @class = "form-control" })
                    </td>
                    <td>
                        <div class="invoice-search-loading">
                            <img class="loading-gif" src="/content/images/loading.gif" />
                            <img class="loading-svg" src="/content/images/loading.svg" />
                        </div>
                    </td>
                </tr>
            </table>
        </div>
        @(Html.Telerik().Grid<CustomerInvoiceListModel.InvoiceModel>()
            .Name("invoices-list")
            .DataBinding(binding =>
            {
                binding.Ajax()
                    .Select("InvoicesList", "Customer", Model.Invoices);
            })
            .Columns(columns =>
            {
                columns.Bound(x => x.InvoiceNumber).HeaderHtmlAttributes(new { Class = "invoice-number t-header" }).ClientTemplate("<label>Invoice#:</label> <#= InvoiceNumber #>").HtmlAttributes(new { Class = "invoice-number" });
                columns.Bound(x => x.Date).HeaderHtmlAttributes(new { Class = "created-date t-header" }).ClientTemplate("<label>Date:</label> <#= Date #>");
                columns.Bound(x => x.Status).HeaderHtmlAttributes(new { Class = "invoice-status t-header" }).ClientTemplate("<label>Status:</label> <#= Status #>");
                columns.Bound(x => x.Amount).HeaderHtmlAttributes(new { Class = "invoice-amount t-header" }).ClientTemplate("<label>Amount:</label> <#= Amount #>");
                columns.Bound(x => x.DownloadLink).HeaderHtmlAttributes(new { Class = "invoice-download t-header" }).ClientTemplate(Html.Raw("<#=DownloadLink #>").ToString()).HtmlAttributes(new { Class = "invoice-download" });
            })
            .ClientEvents(events =>
            {
                events.OnDataBinding("onDataBinding");
                events.OnComplete("onComplete");
            })
            .Pageable(settings => settings.PageSize(gridPageSize).Position(GridPagerPosition.Bottom))
            .EnableCustomBinding(true))
    </div>
</div>
<script>
    var searchKeyupTimeout;
    $(document).on("change", "#@(Html.FieldIdFor(model => model.InvoiceDayOption))", function () {
        InvoiceSearch();
    }).on("keyup", "#@(Html.FieldIdFor(model => model.InvoiceNumber))", function () {
        clearTimeout(searchKeyupTimeout);
        searchKeyupTimeout = setTimeout(function () {
            InvoiceSearch();
        }, 1500);
    });
    function InvoiceSearch() {
        var grid = $("#invoices-list").data("tGrid");
        grid.currentPage = 1;
        grid.ajaxRequest();
    }
    function onDataBinding(e) {
        var customerInvoiceModel = {
            InvoiceNumber: $("#@(Html.FieldIdFor(model => model.InvoiceNumber))").val(),
            InvoiceDayOption: $("#@(Html.FieldIdFor(model => model.InvoiceDayOption))").val()
        };
        e.data = customerInvoiceModel;
        $(".invoice-search-loading").stop().fadeIn(200);
    }
    function onComplete() {
        $(".invoice-search-loading").stop().fadeOut(200);
    }
</script>
